<template>
  <div class="heard-textarea" v-if="getHeardToken()" :class="'drawer-message-box' + store.styleInfo.colorType">
    <t-textarea :maxlength="500" placeholder="说两句吧～" v-model="parmas.content" :autosize="{ minRows: 5 }" />
    <div class="textarea-bottom">
      <span class="bottom-text">还可输入{{ 500 - parmas.content.length }}字</span>
      <span @click="setComment" class="textarea-buttom"> {{ props.text }} </span>
    </div>
  </div>
  <div class="heard-textarea nullheard" v-else :class="'drawer-message-box' + store.styleInfo.colorType">
    <span @click="pathSubmitClick">登录/注册</span>&nbsp;后评论你的想法～
  </div>
  <messageModel
    submitText="前往"
    title="提示"
    :visible="visibleMessage1"
    problem="您暂未登录"
    message="是否前往登录？"
    @closeClick="closeClick"
    @submitClick="pathSubmitClick"
  />
</template>

<script setup lang="ts">
// @ts-nocheck
import { outLogin } from '@/utils/minxin';
import messageModel from '@/components/messageModel/index.vue';
import { getHeardToken } from '@/api/utils';
import { colorList4 } from '../../data';
import buttonIcon from '../components/calligraphyButton.vue';
import { addComment } from '@/api/comment/comment';
import { MessagePlugin } from 'tdesign-vue-next';
import { ref, computed, reactive, onMounted } from 'vue';
import { useProjectStore } from '@/store';

const store = useProjectStore();
const visibleMessage1 = ref(false);
const parmas = reactive({
  id: 0,
  content: '',
  showpieceId: 0,
  projectId: String(localStorage.getItem('projectId')),
});
const loading = ref(false);
const props = defineProps({
  showpieceId: {
    type: Number,
  },
  text: {
    type: String,
    default: '发表评论',
  },
});
const emit = defineEmits(['commentSuccess']);

const setComment = async () => {
  let token = getHeardToken();
  if (!token) {
    visibleMessage1.value = true;
    return;
  }
  if (loading.value) {
    return;
  }
  try {
    let arr = parmas.content.replace(/\s/g, '');

    if (!parmas.content || !arr) {
      MessagePlugin.error(props.showpieceId ? '请填写评论' : '请填写留言');
      return;
    }
    loading.value = true;
    parmas.showpieceId = props.showpieceId;
    let { statusCode } = await addComment(parmas);
    if (statusCode == 200) {
      MessagePlugin.success(props.showpieceId ? '评论成功 等待审核' : '留言成功 等待审核');
      emit('commentSuccess');
      parmas.content = '';
    }
    loading.value = false;
  } catch {
    loading.value = false;
  }
};

const closeClick = () => {
  //取消
  visibleMessage1.value = false;
};
const pathSubmitClick = () => {
  //确认登录

  visibleMessage1.value = false;
  let url = window.location.href;
  let redirectUrl = 'http://wz.wuzhan.art/#/login?redirect=' + url;
  outLogin(redirectUrl);
  // window.location.href = redirectUrl;
};
</script>

<style lang="less" scoped>
:deep(.t-textarea__limit) {
  display: none;
}
.nullheard {
  width: 100%;
  height: 72px;
  background: #fff;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  line-height: 24px;
  span {
    cursor: pointer;
    text-decoration: underline;
    color: rgba(2, 76, 63, 1);
  }
}
.heard-textarea {
  width: 100%;
  margin-top: 0px;
  :deep(textarea) {
    color: rgba(0, 0, 0, 0.8) !important;
  }
}

.textarea-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 28px;
  margin-top: 23.37px;
}
.bottom-text {
  font-family: 'Microsoft YaHei';
  font-size: 16px;
  color: rgba(51, 51, 51, 0.5);
  line-height: 24px;
  text-align: start;
}

.left-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  width: 180px;
  height: 56px;
  margin-top: 16px;
  span {
    position: relative;
    z-index: 99;
  }
}
.btn-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.textarea-buttom {
  width: 104px;
  height: 32px;
  cursor: pointer;
  font-family: SourceHanSerifCN;
  text-align: center;
  font-size: 16px;
  color: #ffffff;
  line-height: 30px;
  position: relative;
  border-radius: 6px;
  background: #c3b7a3;
  box-shadow: 0.5px 0.5px 3px 0px rgba(0, 0, 0, 0.15) inset;
  background-clip: padding-box;
}
:deep(.t-textarea__inner::placeholder) {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.5);
  // opacity: 0.5;
}
:deep(.t-textarea) {
  height: 72px;
}
:deep(.t-textarea__inner) {
  height: 72px !important;
  min-height: 72px !important;
  border-radius: 4px;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.3);

  padding: 16px;
  font-size: 16px;
  line-height: 24px;
}
:deep(.t-is-focused) {
  background: rgba(255, 255, 255, 0.8) !important;
  // padding: 16px;
}
</style>
